import React, {useState,useEffect} from 'React'
import {useSelector, useDispatch} from 'react-redux'

import {handleMusic} from '@/store2/actions'

//方法
const list = musicList => musicList.map(item => (
  <li key={item.id}>{item.name}</li>
))

const params = {}
const str = 'ct=24&qqmusic_ver=1298&new_json=1&remoteplace=txt.yqq.song&searchid=69692969799814090&t=0&aggr=1&cr=1&catZhida=1&lossless=0&flag_qc=0&p=1&n=10&w=%E5%91%A8%E6%9D%B0&g_tk_new_20200303=1463344829&g_tk=1463344829&loginUin=3295849115&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0'
str.split('&').forEach(item => {
  const arr = item.split('=')
  params[arr[0]] = arr[1]
})
export default (props) => {
  const dispatch = useDispatch();
  // console.log(props);
  //state
  const [page, setPage] = useState(1)
  //副作用
  useEffect(() => {
    params.w = '萌萌哒天团'
    if(page <=1) return setPage(1)
    params.p = page
    dispatch(handleMusic(params))
    return undefined
  }, [page])
  const musicList = useSelector(store => store.music.musicList);
  const musicLen = useSelector(store => store.music.musicLen);
  return (
    <div> 
      <h1>音乐列表 {musicLen}</h1>
      <ul>
        {list(musicList)}
        <button onClick={() => setPage(page - 1)}>上一页</button>
        <button onClick={() => setPage(page + 1)}>下一页</button>
      </ul>
    </div>
  )
}